.collect{
  width: 100%;
  height: 100vh;
  .nav{
    width: 100%;
    height: 40px;
    border-top: 1px solid rgba(0,0,0,.1);
    background: #fff;
    display: flex;
    flex-wrap: nowrap;
    line-height: 40px;
    .nav-item{
      margin: 0 auto;
    }
    .active{
      color: rgb(17,190,172);
      border-bottom: 1px solid rgb(17,190,172);
    }
  }
}

.topic{
  width: 100%;
  height: 86vh;
  overflow-y: scroll;
  .list{
    width: 100%;
    background: #fff;
    overflow: hidden;
    .list-item{
      width: 90%;
      margin: 10px auto;
      display: flex;
      padding-bottom: 10px;
      flex-wrap: nowrap;
      border-bottom: 1px solid #ccc;
      .left{
        width: 68%;
        height: 80px;
        .text{
          width: 100%;
          height: 64px;
          font-size: 14px;
        }
        .title{
          width: 100%;
          height: 16px;
          line-height: 16px;
          font-size: 12px;
          color: #999;
        }
      }
      .right{
        width: 110px;
        height: 80px;
        border-radius: 5px;
        img{
          display: block;
          border-radius: 5px;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.hero{
  width: 100%;
  height: 86vh;
  overflow-y: scroll;
  .list {
    width: 100%;
    background: #fff;
    overflow: hidden;
    .list-item {
      width: 90%;
      margin: 0 auto;
      display: flex;
      padding: 10px 0;
      flex-wrap: nowrap;
      border-bottom: 1px solid #ccc;
      .left{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        img{
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .right{
        height: 50px;
        width: 85%;
        .name{
          margin: 10px 0 5px 5px;
          font-size: 14px;
        }
        .nickName{
          margin: 5px 0 5px 5px;
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}
